<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账单信息</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <style>
        body{
            margin-right: 50px;
            margin-left: 50px;
        }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
      </style>
</head>
<body>
    <div id="app">

        <!-- 导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">患者信息</el-menu-item>
            <el-menu-item index="2">医生信息</el-menu-item>
            <el-menu-item index="3">账单信息</el-menu-item>
            <el-menu-item index="4">挂号信息</el-menu-item>
          </el-menu>
 

          <br/>
          <!-- 查询,删除 -->
          <el-form :inline="true" :model="searchByCondition" class="demo-form-inline">
            <el-form-item label="医生姓名" >
              <el-input style="width: 100px;" v-model="searchByCondition.doctorName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="医生id">
              <el-input style="width: 200px;" v-model="searchByCondition.doctorId" placeholder="身份证号"></el-input>
            </el-form-item>
            <el-form-item label="患者姓名" >
              <el-input style="width: 100px;" v-model="searchByCondition.patientName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="患者id">
              <el-input style="width: 200px;" v-model="searchByCondition.patientId" placeholder="身份证号"></el-input>
            </el-form-item>

            <el-form-item label="日期">
              <el-date-picker
              v-model="searchByCondition.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>  
            </el-form-item>

        
            <el-form-item>
              <el-button type="primary" @click="getByCondition">查询</el-button>
              <el-button type="success" @click="getAllBills" plain>查询全部</el-button>
          
            </el-form-item>
          </el-form>
          <br/>


<!-- 表格 -->
    <template>
        <el-table
          :data="bills"
          style="width: 100%">
          <el-table-column type="expand">


            
            <template slot-scope="props">
                
              <el-form label-position="left" inline class="demo-table-expand">


                <el-form-item label="账单 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="挂号单 ID">
                  <span style="cursor: pointer; color:#008c8c" @click="getRegistrationById(props.row.registrationId)">{{ props.row.registrationId }}</span>
                </el-form-item>
                <el-form-item label="日期">
                    <span>{{ props.row.time }}</span>
                  </el-form-item>
                <el-form-item label="用户姓名">
                    <span >{{ props.row.patientName }}</span>
                  </el-form-item>
                <el-form-item label="用户 ID">
                  <span>{{ props.row.patientId }}</span>
                </el-form-item>
                <el-form-item label="医生姓名">
                    <span style="cursor: pointer; color:green" @click="getDoctorById(props.row.doctorId)">{{ props.row.doctorName }}</span>
                  </el-form-item>


                <el-form-item label="药品费用">
                  <span>{{ props.row.drugFee }}</span>
                </el-form-item>
                <el-form-item label="诊断费用">
                  <span>{{ props.row.officeVisFee }}</span>
                </el-form-item>
                <el-form-item label="消费金额">
                  <span>{{ props.row.cost }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
          type="index"
          label="序号"
          width="100"
          >
        </el-table-column>
          <el-table-column
            label="账单id"
            prop="id">
          </el-table-column>
          <el-table-column
            label="用户"
            prop="patientName">
          </el-table-column>
          <el-table-column
            label="消费额"
            prop="cost">
          </el-table-column>
          <el-table-column
          label="账单日期"
          prop="time">
        </el-table-column>
        </el-table>
      </template>



<!-- 医生信息栏 -->
<el-dialog
title="医生信息"
:visible.sync="dialogVisiblePatient"
width="30%"
v-model="doctor"
:before-close="handleClose"
> 
<div style="padding: 35px;">
   <h2>身份证号：{{doctor.id}}</h2>
   <h2>姓名:    {{doctor.name}}</h2>
   <h2>性别:    {{doctor.gender}}</h2>
   <h2>专业:    {{doctor.specialty}}</h2>
   <h2>科室:    {{doctor.department}}</h2>
   
  </div>
<span slot="footer" class="dialog-footer">

  <el-button type="primary" @click="dialogVisiblePatient = false">确 定</el-button>
</span>
</el-dialog>


<!-- 挂号单信息栏 -->
<el-dialog
title="挂号单信息"
:visible.sync="dialogVisibleRegistration"
width="30%"
v-model="registration"
:before-close="handleClose"
> 
<div style="padding: 35px;">
   <h2>挂号单id：{{registration.id}}</h2>
   <h2>挂号时间：    {{registration.time}}</h2>
   <h2>患者身份证号：    {{registration.patientId}}</h2>
   <h2>患者姓名:    {{registration.patientName}}</h2>
   <h2>症状:    {{registration.symptoms}}</h2>
   <h2>医生姓名:    {{registration.doctorName}}</h2>
   <h2>科室:    {{registration.department}}</h2>
  </div>
<span slot="footer" class="dialog-footer">

  <el-button type="primary" @click="dialogVisibleRegistration = false">确 定</el-button>
</span>
</el-dialog>

    </div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/bill.js"></script>
</html>